/**
*@description 粉丝地域
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { browserHistory } from 'dva/router';
import ReactEcharts from 'echarts-for-react';

require("echarts/map/js/china.js");

const Area = ({width, height, data, dispatch }) => {
   if(!data){return (<div className="emptyData">暂无数据</div>)}
    let mydata=[], maxRang=0;
    data.map(function(item) {
        mydata.push({name:item.province.replace(/[省,市]/img,''), value:item.count});
        maxRang = Math.max(maxRang, item.count);
    });

    let option = {
        tooltip: {
            trigger: 'item'
        },
        /*toolbox: {
            show: true,
            padding:[0,30,0,0],
            feature: {
                //restore: {},
                //saveAsImage: {backgroundColor:'#000000',icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}},

                myTool : {
                    show : true,
                    title : '保存为图片',
                    icon : 'image://../sources/download.png?t=004',
                    iconStyle:{emphasis:{borderColor:"#fff"}},
                    padding:30,
                    onclick : function (){
                        html2canvas(document.getElementsByClassName('ant-card-body')[0]).then(function(canvas){
                                let dC = document.getElementById("downtextcontainer"), dataurl = canvas.toDataURL('jpg');
                                dC.href = dataurl;
                                         dC.download = "map.jpg";

                                         if (window.VBArray) {
                                                dC.click();
                                         } else if (document.createEvent) {
                                                var ev = document.createEvent('MouseEvents');
                                                ev.initEvent('click', false, true);
                                                dC.dispatchEvent(ev);
                                         }
                            });
                    }
                },
            }
        },*/
        visualMap: {
            orient: 'vertical',
            color:['#2E94D9','#D5F7FD'],
            min: 0,
            max: maxRang,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            // calculable: true,
            itemWidth: 8,
            itemHeight: 60,
            textStyle:{
                color:"#fff"
            }
        },
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         saveAsImage: {backgroundColor:'#000000',icon : 'image://../sources/download.png?t=004', iconStyle:{emphasis:{borderColor:"#fff"}}}
        //     }
        // },
        series: [
            {
                name: '粉丝地域分布',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    normal: {
                        show: false,
                        textStyle:{
                            fontSize:"5"
                        }
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:mydata
            }
        ]
    }

  return (
    <div>
      <ReactEcharts
            option={option} 
            style={{width:width, height: height}}
            theme={"theme_name"} />
    </div>
  );
};

Area.propTypes = {
    width:PropTypes.string.isRequired,
    height:PropTypes.number.isRequired,
    data: PropTypes.array
};

export default connect()(Area);